import React, { PureComponent } from 'react'

export class App extends PureComponent {
  constructor() {
    super()
    this.state = {
      books: [
        {name:"你不知道的JavaScript", price: 99, count : 1},
        {name:"JavaScript高级程序设计", price: 88, count : 2},
        {name:"React高级程序设计", price: 77, count : 1},
        {name:"Vue高级程序设计", price: 66, count : 1},
      ]
    }
  }
  addItem() {
    const newBoos = { name: 'Java高级程序设计', price: 66, count: 1 }
    // 1.直接修改原有state的值，重新设置一遍
    // 在PureComponent 中是无法重新渲染(re-render)的
    // (浅层比较：比较是否是拿着两个一样的数据进行比较，直接return false 不重新渲染)
    // this.state.books.push(newBoos) 
    // this.setState({books: this.state.books})
    
    // 避免直接修改对象： 在 PureComponent 中，直接修改对象而不是创建新对象会导致浅层比较失败。确保每次更新 props 或 state 时都创建新的对象，以确保引用发生变化。
    
    // 浅拷贝原来的数据，对浅拷贝过的数据进行操作，然后重新赋值
    const books = [...this.state.books]
    books.push(newBoos)
    this.setState({books})
  }
  singleBookCountIncrement(index) {
    // PureComponent进行了浅层比较，避免不必要的重新渲染
    // 浅层比较： 意味着对对象的引用进行比较，而不是逐层递归比较对象的内容。
    const books = [...this.state.books]
    books[index].count++
    this.setState({books})
  }
  render() {
    const {books} = this.state
    return (
      <div>
        <h2>数据列表</h2>
        <ul>
          {books.map((item,index) => {
            return <li key={index }>
              <span>书籍：{item.name}, 价格：{item.price}, 数量:{ item.count}</span>
              <button onClick={e => this.singleBookCountIncrement(index)}>count +1</button>
            </li>
          })}
        </ul>
        <button onClick={e => this.addItem()}>新增书籍</button>
      </div>
    )
  }
}

export default App